<script setup lang="ts">

import IndexSmallTitle from "../components/common/IndexSmallTitle.vue";
import {ref} from "vue";
import PracticeItem from "@/components/practice/PracticeItem.vue";
import {LearnPracticeDatas} from "@/types/practiceData";

let learnDataList: LearnPracticeDatas = [
  {
    content: ['1.防溜铁铁安全使用', '2.防溜铁铁安全使用', '3.防溜铁铁安全使用'],
    title: 'title',
    learned: true,
    learnStart: false,
    totalCount: 10,
  },
  {content: ['防溜铁铁安全使用'], totalCount: 18, title: 'title', learned: false, learnStart: false},
  {content: ['防溜铁铁安全使用'], title: 'title', learned: false, learnStart: false, totalCount: 10},
  {content: ['防溜铁铁安全使用'], title: 'title', learned: false, learnStart: false, totalCount: 2},
  {content: ['防溜铁铁安全使用'], title: 'title', learned: false, learnStart: false, totalCount: 3},
  {content: ['防溜铁铁安全使用'], title: 'title', learned: false, learnStart: false, totalCount: 4},
]

const tableData = [
  {
    date: '1',
    name: '车辆塞门处置相关 要求培训课件',
    address: '学习',
  },
  {
    date: '2',
    name: '车辆塞门处置相关 要求培训课件',
    address: '学习',
  },
  {
    date: '3',
    name: '车辆塞门处置相关 要求培训课件',
    address: '学习',
  },
  {
    date: '4',
    name: '车辆塞门处置相关 要求培训课件',
    address: '学习',
  },
]


const value = ref('练习状态')

function onChangeValue(e: any) {
  console.log(e);
  value.value = e;
  console.log(`valuevaluevalue${value.value}`)
}

const options = [
  {
    value: 'Option1',
    label: '练习状态',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
];


</script>

<template>
  <div style="display: flex;flex-direction: row">
    <div style="margin-left: 15px;margin-top: 20px">
      <RouterView></RouterView>
    </div>
    <div
        style="background-color: #FFFFFF;width: 100%;margin-top: 20px;padding: 20px;display: flex;align-items: start;margin-left: 20px;flex-direction: column">
      <el-select @change="onChangeValue(value)" v-model="value" :placeholder="value"
                 style="width: 240px;align-items: start">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
      <div style="height: 20px"></div>
      <index-small-title title="月、年学习任务"></index-small-title>
      <PracticeItem :data="learnDataList"></PracticeItem>
    </div>
    <div class="class_head_right">
      <div>
        <IndexSmallTitle title="智能推荐" showMore="查看更多>>"></IndexSmallTitle>
        <el-table :data="tableData" border style="width: 100%" class="custom-table rounded-table">
          <el-table-column prop="date" label="序号" width="60" align="center"/>
          <el-table-column prop="name" label="练习题" width="180" align="center"/>
          <el-table-column prop="address" label="操作" align="center">
            <template v-slot="scope">
              <span class="status-text">{{ scope.row.address }}>></span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<style scoped>
.class_head_right {
  width: 320px;
  padding: 8px 15px;
  border-radius: 6px;
  background: #FFFFFF;
  border: 1px solid rgba(4, 42, 94, 0.1);
  margin-top: 20px;
  margin-left: 15px;
  margin-right: 15px;
}

.rounded-table {
  border: 1px solid rgba(4, 42, 94, 0.1);
  border-radius: 10px;
}

.custom-table {
  margin-top: 20px;
}

.el-table {
  --el-table-header-bg-color: #EEF8FE;
  --el-table-header-text-color: #000000;
  --el-table-border-color: #909399;
}

.status-text {
  color: #3C8DF9;
}
</style>